<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
    <meta name="format-detection" content="telephone=no">
<title>深度</title>
<script>
    (function (doc, win) {
      var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
          };
      recalc(); 
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<style>
* { padding: 0; margin: 0; }
html, body {
  width: 100%;
  height: 100%;
}
body {
  background-color: #071724;
  font-family: "Microsoft Yahei";
}
.deep_market {
  padding-top: .1rem;
  width: 100%;
  height: 100%;
  background-color: #131E30;
}
.deep_text {
  zoom: 1;
  width: 55%;
  margin-left: .3rem;
  line-height: 1rem;
}
.deep_text:after {
  display: block;
  content: "";
  clear: both;
}
.deep_text div {
  width: 50%;
  font-size: .4rem;
  /*text-align: right;*/
}
.deep_text div span {
  display: block;
  float: left;
  width: 60%;
  height: .6rem;
  margin-top: .2rem;
  margin-right: .3rem;
}
.fl {
  float: left;
  color: #28CA69;
}
.fr {
  float: right;
  color: #F17A64;
}
.fl span {
  background-color: #28CA69;
}
.fr span {
  background-color: #F17A64;
}
</style>
</head>
<body>
<div class="deep_market">
  <div class="deep_text">
    <div class="fl">
      <span></span>买
    </div>
    <div class="fr">
      <span></span>卖
    </div>
  </div>
  <input type="hidden" name="id" value="{{$id}}">
  <div id="Dmarket" style="width: 100%; height: 10rem;"></div>
</div>

<script src="{{asset('/api/static/js/jquery-1.10.2.min.js')}}"></script>
<script src="{{asset('/api/static/js/echarts.min.js')}}"></script>
<script>
var Bid = "{{$id}}";
console.log(Bid)
//var data1 = ['200','300', '400', '500', '600', '700', '800', '900', '1000', '1100', '1200']
var data11 =  null; // 买
var data12 =  null; // 卖
var data13 =  null; // 垃圾数组
var data2 =  null;
depth_line_data()

function depth_line_data(){
    $.ajax({
        url: "/api/depth_line_data",
        type: 'POST',
        data: { 'id': Bid },
        dataType: 'JSON',
        success: function(repo){
            // console.log(repo)
            var $data = repo.data;
            data11 =  $data['buy'];
            data12 =  $data['sale'];
            data13 =  $data['fake'];
            data2 =  $data['num'];
            depthLine()

            var timer = null;
            clearInterval(timer);
            timer = setInterval(function () {
                $.ajax({
                    url: "/api/depth_line_data",
                    type: 'POST',
                    data: {'id': Bid },
                    dataType: 'JSON',
                    success: function(repo){
                        var $data = repo.data;
                        data11 =  $data['buy'];
                        data12 =  $data['sale'];
                        data13 =  $data['fake'];
                        data2 =  $data['num'];
                        depthLine()
                    }
                })
            }, 15000);
        }
    });
};
function depthLine() {
  var datas = data11.concat(data13).concat(data12)
  console.log(datas)
  var option = {
    backgroundColor: '#131E30',
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: datas
    },
    yAxis: {
      type: 'value'
    },
    visualMap: {
      show: false,
      dimension: 0,
      pieces: [{
        gt: 0,
        lte: data11.length,
        color: '#28CA69'
      }, {
        gt: data11.length,
        lte:  data13.length,
        color: 'transparent'
      }, {
        gt: (data11.length + data13.length),
        lte: data11.length + data12.length + data13.length,
        color: '#F17A64'
      }]
    },
    series: [{
      // data: [900, 800, 700, 600, 700, 0, 900, 900, 800, 700, 600 ],
      data: data2,
      type: 'line',
      areaStyle: {
        normal: {
         opacity: .9
        }
      }
    }]
  };
  var myChart = echarts.init(document.getElementById('Dmarket'));
  myChart.setOption(option);  
}

</script>
</body>
</html>
